
<template>
    <transition name="move">
        <div class="food-detail" v-show="showFood" ref="foodDetail">
            <div class="food-content">
                <div class="image-header">
                    <img :src="food.image" alt="">
                    <div class="back" @click="back">
                        <span class="icon-arrow_lift"></span>
                    </div>
                </div>
                <div class="content">
                    <h1 class="name">{{food.name}}</h1>
                    <div class="detail">
                        <span class="sell-count">月售{{food.sellCount}}份</span>
                        <span class="ratings">好评率{{food.rating}}%</span>
                    </div>
                    <div class="price">
                        <span class="new-price">￥{{food.price}}</span>
                        <del class="old-price" v-show="food.oldPrice">￥{{food.oldPrice}}</del>
                    </div>
                    <div class="cartcontrol-wrapper">
                        <cartControl :food="food" @add="addFood"></cartControl>
                    </div>
                    <transition name="fade">
                        <div class="buy" v-show="!food.count || food.count == 0" @click.stop="addFirst">加入购物车</div>
                    </transition>
                </div>
                <split v-show="food.info"></split>
                <div class="introduction" v-show="food.info">
                    <h1 class="title">商品介绍</h1>
                    <p class="info">{{food.info}}</p>
                </div>
                <split></split>
                <div class="rating">
                    <h1 class="title">商品评价</h1>
                    <ratingSelect :ratings="food.ratings" :selectType="selectType" :onlyContent="onlyContent" :desc="desc" @selectTab="selectRating" @toggleCon="hasContent"></ratingSelect>
                    <div class="rating-wrapper">
                        <ul v-show="food.ratings && food.ratings.length">
                            <li v-for="rating in food.ratings" class="rating-item" v-show="needShow(rating.rateType, rating.text)">
                                <div class="user">
                                    <span class="name">{{rating.username}}</span>
                                    <img class="avatar" :src="rating.avatar" alt="" width="12" height="12">
                                </div>
                                <div class="time">{{rating.rateTime | formatDate}}</div>
                                <div class="desc">
                                    <span :class="{'icon-thumb_up': rating.rateType === 0, 'icon-thumb_down': rating.rateType === 1}"></span>
                                    <span class="text">{{rating.text}}</span>
                                </div>
                            </li>
                        </ul>
                        <div class="no-rating" v-show="!food.ratings || !food.ratings.length">~~暂无评价~~</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>


<script>

import Vue from 'vue';
import BScroll from 'better-scroll';
import CartControl from 'components/cartControl/cartControl.vue';
import Split from 'components/split/split.vue';
import RatingSelect from 'components/ratingSelect/ratingSelect.vue';
import {formatDate} from 'common/js/date.js';
const ALL = 2;         //所有评价
const POSITIVE = 0;   //正面评价
const NEGATIVE = 1;   //负面评价
export default {
    props: {
        food: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return {
            showFood: false,
            selectType: ALL,
            onlyContent: true,
            desc: {
                all: '全部',
                positive: '推荐',
                negative: '吐槽'
            }
        }
    },
    methods: {
        show(){
            this.showFood = true;
            this.selectType = ALL,
            this.onlyContent = false,
            this.$nextTick(() => {
                if(!this.scroll){
                    this.scroll = new BScroll(this.$refs.foodDetail, {
                        click: true
                    });
                }else{
                    this.scroll.refresh();
                }
            });
        },
        back(){
            this.showFood = false;
        },
        addFirst(event){   //第一次点击的是购物车按钮，都是将对象本身作为参数传
            if(!event._constructed){
                return;
            }
            Vue.set(this.food, 'count', 1);
            this.$emit('add', event.target);
        },
        addFood(target){  //第二次点击是是加号按钮，都是将对象本身作为参数传
            this.$emit('add', target);
        },
        selectRating(type){
             this.selectType = type;
             this.$nextTick(() => {
                this.scroll.refresh();
            });
        },
        needShow(type, text){
            if(this.onlyContent && !text){
                return false;
            }
            if(this.selectType === ALL){
                return true;
            }else{
                return type === this.selectType;
            }
        },
        hasContent(){
            this.onlyContent = !this.onlyContent;
            this.$nextTick(() => {
                this.scroll.refresh();
            });
        },
    },
    filters: {
        formatDate(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    components: {
        'cartControl': CartControl,
        'split': Split,
        'ratingSelect': RatingSelect
    }
}


</script>



<style scoped lang="stylus" rel="stylesheet/stylus">

    @import '~common/stylus/mixin.stylus';

    .food-detail{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 48px;
        z-index: 30;
        background: #fff;
        transition: all 1s ease;
        &.move-enter-active, &.move-leave-active{
            opacity: 1;
            transform: translate3d(0,0,0);
        }
        &.move-enter, &.move-leave-to{
            opacity: 0;
            transform: translate3d(100%,0,0);
        }
        .food-content{
            .image-header{
                position: relative;
                width: 100%;
                height: 0;
                padding-top: 100%;
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
                .back{
                    position: absolute;
                    top: 0;
                    left: 0;
                    .icon-arrow_lift{
                        display: block;
                        padding: 10px;
                        color: #fff;
                        font-size: 20px;
                    }
                }
            }
            .content{
                position: relative;
                padding: 18px;
                .name{
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 14px;
                    color: rgb(7,17,27);
                    margin-bottom: 8px;
                }
                .detail{
                    margin-bottom: 10px;
                    font-size: 0;
                    span{
                        display: inline-block;
                        font-size: 10px;
                        line-height: 10px;
                        color: rgb(147,153,159);
                        margin-right: 12px;
                    }
                }
                .price{
                    font-weight: bold;
                    line-height: 24px;
                    .new-price{
                        font-size: 20px/28px;
                        color: rgb(240,20,20);
                        margin-right: 5px;
                    }
                    .old-price{
                        font-size: 10px;
                        color: rgb(147,153,159);
                    }
                }
                .cartcontrol-wrapper{
                    position: absolute;
                    right: 12px;
                    bottom: 12px;
                }
                .buy{
                    position: absolute;
                    z-index: 10;
                    right: 18px;
                    bottom: 18px;
                    height: 24px;
                    line-height: 24px;
                    padding: 0 12px;
                    box-sizing: border-box;
                    font-size: 10px;
                    color: #fff;
                    background: rgb(0,160,220);
                    border-radius: 12px;
                    -webkit-border-radius: 12px;
                    &.fade-enter-active, &.fade-leave-active{
                        transition: all 0.5s;
                        opacity: 1;
                    }
                    &.fade-enter, &.fade-leave-to{
                        opacity: 0;
                    }
                }
            }
            .introduction{
                padding: 18px;
                .title{
                    font-size: 14px;
                    line-height: 24px;
                    font-weight: bold;
                    margin-bottom: 8px;
                    color: rgb(77,85,93);
                }
                .info{
                    font-size: 12px;
                    line-height: 24px;
                    color: rgb(77,85,93);
                    padding: 0 8px;
                }
            }
            .rating{
                padding-top: 18px;
                .title{
                    font-size: 14px;
                    line-height: 24px;
                    font-weight: bold;
                    margin-left: 18px;
                    color: rgb(77,85,93);
                }
                .rating-wrapper{
                    padding: 0 18px;
                    .rating-item{
                        position: relative;
                        padding: 16px 0;
                        border-1px(rgba(7,17,27,0.1));
                        .user{
                            position: absolute;
                            right: 0;
                            top: 16px;
                            line-height: 12px;
                            font-size: 0;
                            .name{
                                display: inline-block;
                                margin-right: 6px;
                                font-size: 10px;
                                color: rgb(147,153,159);
                            }
                            .avatar{
                                display: inline-block;
                                border-radius: 50%;
                            }
                        }
                        .time{
                            font-size: 10px;
                            color: rgb(147,153,159);
                            line-height: 12px;
                            margin-bottom: 6px;
                        }
                        .desc{
                            font-size: 12px;
                            line-height: 20px;
                            color: rgb(7,17,27);
                            .icon-thumb_up,.icon-thumb_down{
                                font-size: 12px;
                                margin-right: 2px;
                                vertical-align: -1px;
                            }
                            .icon-thumb_up{
                                color: rgb(0,160,220);
                            }
                            .icon-thumb_down{
                                color: rgb(147,153,159);
                            }
                        }
                    }
                    .no-rating{
                        padding: 16px 0;
                        text-align: center;
                        font-size: 14px;
                        color: maroon;
                    }
                }
            }
        }
    }

</style>







